<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
		<title></title>
		<link rel="stylesheet" href="./css/home page.css">
		<style>
			/* 初始化 */
			* {
				margin: 0;
				padding: 0;
			}

			.a {
				margin-left: 20%;
				width: 40%;
				font-size: 17px;
				color: #5f5757;
			}

			a {
				color: #000000;
				text-decoration: none;
			}

			/* 图片 */
			.pandas {
				background-image: url(../img/0e963d40-c4d4-42c0-98a6-46add966ccc5.webp);
				height: 340px;
				width: 100%;
				background-size: 100% 100%;
				line-height: 25px;
			}

			.temperature {
				padding-left: 2%;
				padding-top: 150px;
				color: white;
			}

			.temperature span {
				font-size: 26px;
			}

			.address {
				color: white;
				margin-left: 2%;
				font-size: 17px;
			}

			.king {
				color: white;
				margin-left: 2%;
				font-size: 13px;
			}

			.list {
				background-color: white;
				margin-left: 2%;
				width: 96%;
				height: 33px;
				border-radius: 8px;
			}

			.search img {
				margin-top: 1%;
				margin-left: 1%;
				object-fit: cover;
			}

			.search {
				display: flex;
			}

			.search p {
				color: #808080;
				font-size: 15px;
				margin-top: 4px;
			}

			.sell {
				background-color: white;
				width: 98%;
				height: 110px;
				margin-top: 3%;
				margin-left: 1%;
				border-radius: 10px;
				display: flex;
				justify-content: space-around;
				z-index: 5;
				position: absolute;
			}

			.sell-item img {

				height: 55%;
				border-radius: 30px;
			}

			.sell-item {
				margin-top: 5%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}

			.sell-item p {
				width: 100%;
				text-align: center;
			}





			/* 背景颜色 */
			.ground {
				background-color: #f5f5f5;
				width: 100%;
				height: 2750px;
				margin-top: 14%;
				position: absolute;
				z-index: -10;
			}

			/* 公告 */
			.announce {
				background-color: #f8ebd9;
				width: 100%;
				height: 28px;
				margin-top: 60px;
				display: flex;
			}

			.announce p {
				color: #ffc300;
				margin-top: 0.3%;
				margin-left: 2%;
			}

			.announce img {
				margin-top: 1%;
				margin-left: 1%;
			}

			.gameguide {
				display: flex;
				margin-top: 1%;
			}

			.game img {
				width: 150%;
				margin-left: 2%;
			}

			.guides img {
				width: 73%;
				margin-left: 25%;
			}

			/* 推荐景区 */
			.recommend {
				background-color: #e2edff;
				width: 100%;
				height: 30px;
			}

			.arecommend {
				margin-top: 10px;
				background-color: #e2edff;
				width: 100%;
				height: 30px;
			}

			.recommes {
				display: flex;
				justify-content: space-between;
				width: 97%;
			}

			.recome {
				width: 50%;
				display: flex;
			}

			.recome p {
				color: #515355;
				margin-left: 5%;
				margin-top: 2px;
			}

			.more {
				margin-top: 0.6%;
				background-color: white;
				border-radius: 14px;
				width: 20%;
				height: 23px;
				margin-left: 62%;
			}

			.more p {
				text-align: center;
			}

			/* 景区图片 */
			.pictures {
				margin-top: 5px;
				display: flex;
				width: 100%;
				flex-wrap: wrap;
				justify-content: space-around;
			}

			.mountion {
				width: 48%;
				margin-left: 1%;
				margin-top: 9px;
			}

			.mountion-picture img {
				width: 100%;
				height: 300px;
				border-radius: 10px 10px 0px 0px;
				object-fit: cover;
			}

			.white {
				margin-top: -2%;
				background-color: white;
				width: 100%;
				height: 88px;
				border-radius: 0px 0px 10px 10px;
			}

			.house {
				margin-left: 3%;
			}

			.dolor {
				display: flex;
				justify-content: space-between;
				width: 60%;
				margin-left: 2%;
			}

			.dolors {
				display: flex;
				justify-content: space-between;
				width: 40%;
				margin-left: 2%;
			}

			.reddolor {
				color: red;

			}

			.blackdolor {
				color: #808080;
			}

			.count p {
				margin-top: -2px;
			}

			.count {
				font-size: 15px;
				border: red solid 1px;
				border-radius: 7px;
				color: #ff3535;
				width: 43px;
				height: 20px;
				text-align: center;
			}

			.line {
				background-color: #dadada;
				width: 2px;
				height: 20px;
				margin-top: 2px;
			}

			.numbers {
				display: flex;
				justify-content: space-between;
				width: 40%;
				margin-left: 3%;
			}

			.number {
				display: flex;
				justify-content: space-between;
				width: 80%;
				margin-left: 3%;
			}

			.number-item {
				color: #808080;

			}

			.number-it {
				margin-left: 25%;
			}

			/* 推荐攻略 */
			.recomme {
				background-color: #e2edff;
				width: 100%;
				height: 28px;
				display: flex;
				margin-top: 2%;
			}

			.recomme img {
				margin-left: 1%;
			}

			.recomme p {
				color: #515355;
				margin-top: 0.3%;
				margin-left: 2%;
			}

			/* 攻略图片 */
			.picture {

				display: flex;
				width: 100%;
				flex-wrap: wrap;
				justify-content: space-around;
			}

			.hill {
				width: 48%;
				margin-left: 1%;
				margin-top: 9px;
			}

			.hill-picture img {
				width: 100%;
				height: 200px;
				border-radius: 10px 10px 0px 0px;
				object-fit: cover;
			}

			.word p {
				padding-top: 3%;
				padding-left: 2%;
				font-size: 14px;
			}

			.head {
				width: 40px;
				margin-left: 3%;
				margin-top: 3%;
			}

			.head img {
				border-radius: 50%;
				width: 100%;
			}

			.hearts {
				display: flex;
			}

			.name {
				margin-left: 5%;
				margin-top: 5%;
				width: 45%;
			}

			.heart {
				margin-left: 10%;
				margin-top: 5%;
				font-size: 30px;
				color: #a3a3a3;
			}

			.one {
				margin-left: 3%;
				margin-top: 5%;
			}

			.nothing {
				text-align: center;
				color: #585858;
				margin-top: 5%;
			}

			/* 底部导航栏 */
			.bottom {
				display: flex;
				justify-content: space-around;
				background-color: #fcfcfc;
				height: 46px;
				width: 100%;
				bottom: 0;
				position: fixed;
				padding: 10px 0 10px 0;
			}

			.bottom-item {
				margin-top: -1%;
				width: 20%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}

			.bottoms {
				width: 100%;
				text-align: center;
			}

			.bottom-item img {
				width: 30px;
				height: 30px;
			}

			.red {
				color: #ec3131;
				width: 100%;
				text-align: center;
			}

			.plane {
				background-color: white;
				width: 80px;
				height: 80px;
				margin-top: -53px;
				border-radius: 50%;
			}

			.hair {
				margin-left: 25px;
				margin-top: 10px;
			}

			.plane img {
				width: 50px;
				height: 50px;
				margin-left: 20%;
				margin-top: 15%;

			}
		</style>
	</head>
	<body style="background-color: #f4f4f4;">
		<!--图片 -->
		<div class="pandas">
			<div class="temperature">
				<p><span>☀</span> 17℃</p>
			</div>
			<div class="address">
				<strong>济源</strong>
			</div>
			<div class="king">
				<p>王屋山景区</p>
			</div>
			<div class="list">
				<div class="search">
					<img src="./img/aaaaa.png" alt="">
					<p>搜索</p>
				</div>
			</div>
			<div class="sell">
				<div class="sell-item">
					<img src="./img/ebdfd3b1-a2d9-4d71-8cf3-04d05a2caa28.png" alt=""></a>
					<p>售票专区</p>
				</div></a>
				<div class="sell-item">
					<img src="./img/b037427d-fb51-4b9a-a9fe-b01d91f05b97.png" alt="">
					<p>景点讲解</p>
				</div>
				<div class="sell-item">
					<img src="./img/444e4b59-de27-4291-a839-6cf2e32e1e28.png" alt="">
					<p>景区地图</p>
				</div>
				<div class="sell-item">
					<img src="./img/9d6e2e47-0e53-4df8-9874-87ed07e7b599.png" alt="">
					<p>使用说明</p>
				</div>
				<div class="sell-item">
					<img src="./img/c54b8211-57b9-4c5c-86b6-e18739e19b0b.png" alt="">
					<p>演出预告</p>
				</div>
			</div>

			<!--推荐景区-->
			<div class="recommend">
				<div class="recommes">
					<div class="recome">
						<img src="./img/hh.png" alt="">
						<p>推荐景区</p>
					</div>
					<div class="more">
						<p>更多></p>
					</div>
				</div>
			</div>


			<!--景区图片-->
			<div class="pictures">
				<div class="mountion">
					<div class="mountion-picture">
						<img src="./img/81c7e334-9b4d-4046-a55d-b6000bd00aec.jpg" alt="">
					</div>
					<div class="white">
						<div class="house">
							<p>王屋山</p>
						</div>
						<div class="dolor">
							<div class="reddolor">
								￥90
							</div>
							<div class="blackdolor">
								<del>￥100</del>
							</div>
							<div class="count">
								<p>0.9折</p>
							</div>
						</div>
						<div class="number">
							<div class="number-item">
								4.0分
							</div>
							<div class="line">

							</div>
							<div class="number-item">
								评价5
							</div>
							<div class="number-it">
								♡99+
							</div>
						</div>
					</div>
				</div>
				<div class="mountion">
					<div class="mountion-picture">
						<img src="./img/91735d5b-8663-489b-ba17-aaf7fa187e84.jpg" alt="">
					</div>
					<div class="white">
						<div class="house">
							<p>太行九莲山</p>
						</div>
						<div class="dolors">
							<div class="reddolor">
								￥80
							</div>
							<div class="blackdolor">
								<del>￥100</del>
							</div>

						</div>
						<div class="number">
							<div class="number-item">
								4.0分
							</div>
							<div class="line">

							</div>
							<div class="number-item">
								评价5
							</div>
							<div class="number-it">
								♡99+
							</div>
						</div>
					</div>
				</div>
				<div class="mountion">
					<div class="mountion-picture">
						<img src="./img/af43a7ba-115a-415f-90e9-079897a10ba9.jpg" alt="">
					</div>
					<div class="white">
						<div class="house">
							<p>万仙山景区</p>
						</div>
						<div class="dolors">
							<div class="reddolor">
								￥94
							</div>
							<div class="blackdolor">
								<del>￥110</del>
							</div>

						</div>
						<div class="numbers">
							<div class="number-item">
								4.0分
							</div>
							<div class="line">

							</div>
							<div class="number-item">
								评价5
							</div>

						</div>
					</div>
				</div>
				<div class="mountion">
					<div class="mountion-picture">
						<img src="./img/ddba79ca-9e6b-404a-8776-8d31f8b35ae5.webp" alt="">
					</div>
					<div class="white">
						<div class="house">
							<p>华山</p>
						</div>
						<div class="dolors">
							<div class="reddolor">
								￥153
							</div>
							<div class="blackdolor">
								<del>￥170</del>
							</div>

						</div>
						<div class="numbers">
							<div class="number-item">
								4.0分
							</div>
							<div class="line">

							</div>
							<div class="number-item">
								评价5
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--推荐攻略-->
			<div class="arecommend">
				<div class="recommes">
					<div class="recome">
						<img src="./img/hh.png" alt="">
						<p>推荐攻略</p>
					</div>
					<div class="more">
						<p>更多></p>
					</div>
				</div>
			</div>
			<!--推荐图片-->
			<div class="picture">
				<div class="hill">
					<div class="hill-picture">
						<img src="./img/aa.png" alt="">
					</div>
					<div class="white">
						<div class="word">
							<p>此山为华山，是无比的壮观</p>
						</div>
						<div class="hearts">
							<div class="head">
								<img src="./img/bbb.jpg" alt="">
							</div>
							<div class="name">
								<p>6v666</p>
							</div>
							<div class="heart">
								♡
							</div>
							<div class="one">
								1
							</div>
						</div>
					</div>
				</div>
				<div class="hill">
					<div class="hill-picture">
						<img src="./img/4dd7c9b5-d19a-4977-bb59-888beb4d537c.jpg" alt="">
					</div>
					<div class="white">
						<div class="word">
							<p>一波美图来袭</p>
						</div>
						<div class="hearts">
							<div class="head">
								<img src="./img/ss.jpg" alt="">
							</div>
							<div class="name">
								<p>月光小飞侠</p>
							</div>
							<div class="heart">
								♡
							</div>
							<div class="one">
								1
							</div>
						</div>
					</div>
				</div>
				<div class="hill">
					<div class="hill-picture">
						<img src="./img/d3654f67-ead8-4b7a-b337-ffcc93dfd58e (1).jpg" alt="">
					</div>
					<div class="white">
						<div class="word">
							<p>我的天，太可爱了吧！</p>
						</div>
						<div class="hearts">
							<div class="head">
								<img src="./img/vvv.jpg" alt="">
							</div>
							<div class="name">
								<p>玫瑰小兔</p>
							</div>
							<div class="heart">
								♡
							</div>
							<div class="one">
								1
							</div>
						</div>
					</div>
				</div>
				<div class="hill">
					<div class="hill-picture">
						<img src="./img/1b0a2af7-a40d-4da8-9aeb-7bebaf4f8ebd.webp" alt="">
					</div>
					<div class="white">
						<div class="word">
							<p>一家人整整齐齐的</p>
						</div>
						<div class="hearts">
							<div class="head">
								<img src="./img/ss.jpg" alt="">
							</div>
							<div class="name">
								<p>玫瑰小兔</p>
							</div>
							<div class="heart">
								♡
							</div>
							<div class="one">
								1
							</div>
						</div>
					</div>
				</div>
				<div class="hill">
					<div class="hill-picture">
						<img src="./img/756ec12c-0091-4fab-b766-13d687faaef3.jpg" alt="">
					</div>
					<div class="white">
						<div class="word">
							<p>一群羊驼</p>
						</div>
						<div class="hearts">
							<div class="head">
								<img src="./img/bbb.jpg" alt="">
							</div>
							<div class="name">
								<p>玫瑰小兔</p>
							</div>
							<div class="heart">
								♡
							</div>
							<div class="one">
								1
							</div>
						</div>
					</div>
				</div>
				<div class="hill">
					<div class="hill-picture">
						<img src="./img/739591f5-7b46-4130-b747-bf4f71fcecdb.jpg" alt="">
					</div>
					<div class="white">
						<div class="word">
							<p>熊猫馆有很多熊猫哦！快来看看吧</p>
						</div>
						<div class="hearts">
							<div class="head">
								<img src="./img/tou.jpg" alt="">
							</div>
							<div class="name">
								<p>玫瑰小兔</p>
							</div>
							<div class="heart">
								♡
							</div>
							<div class="one">
								1
							</div>
						</div>
					</div>
				</div>
				<div class="hill">
					<div class="hill-picture">
						<img src="./img/86972ac0-0038-449e-ae8d-b4bf8f48098a.webp" alt="">
					</div>
					<div class="white">
						<div class="word">
							<p>一波美图来袭~</p>
						</div>
						<div class="hearts">
							<div class="head">
								<img src="./img/vvv.jpg" alt="">
							</div>
							<div class="name">
								<p>玫瑰小兔</p>
							</div>
							<div class="heart">
								♡
							</div>
							<div class="one">
								1
							</div>
						</div>
					</div>
				</div>
				<div class="hill">
					<div class="hill-picture">
						<img src="./img/3d01eb34-eba2-4184-a8ef-c3cf4bb45413.jpg" alt="">
					</div>
					<div class="white">
						<div class="word">
							<p>这是在干嘛</p>
						</div>
						<div class="hearts">
							<div class="head">
								<img src="./img/ss.jpg" alt="">
							</div>
							<div class="name">
								<p>玫瑰小兔</p>
							</div>
							<div class="heart">
								♡
							</div>
							<div class="one">
								1
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="nothing">
				<p>没有更多了...</p>
			</div>
			<!--底部导航栏-->
			<div class="bottom">
				<div class="bottom-item">
					<img src="./img/home.png" alt="">
					<div class="red">
						<p>首页</p>
					</div>
				</div>
				<div class="bottom-item">
					<a href="./strategy.html"><img src="./img/hua.png" alt=""></a>
					<div class="bottoms">
						<p>攻略</p>
					</div>
				</div>
				<div class="plane">
					<img src="./img/ec2d9bad-9fa4-4985-9e42-15f73c0ab32a.png" alt="">
					<div class="hair">
						<p>发布</p>
					</div>
				</div>
				<div class="bottom-item">
					<a href="./phb.html"><img src="./img/phb.png" alt=""></a>
					<div class="bottoms">
						<p>排行榜</p>
					</div>
				</div>
				<div class="bottom-item">
					<a href="./my.html"><img src="./img/mmy.png" alt=""></a>
					<div class="bottoms">
						<p>我的</p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>